
<template>
  <div class="mapsearchcss">
    <el-form :model="form"  ref="form" label-width="0" >

    <el-form-item  prop="address">
        <el-row>
          <el-col :span="20">
            <el-input v-model="form.address" placeholder="请输入商家地址" />
          </el-col>
          <el-col :span="4" style="text-align: left; ">
            <el-button type="primary" @click="handlerMapSearch"  >搜索</el-button>
          </el-col>
        </el-row>
      </el-form-item>
      <p v-if="form.longitude">你选中的位置-经度:{{form.longitude}} 纬度:{{form.latitude}}</p>
    </el-form>

    <baidu-map v-if="center" class="bm-view" ak="3LgMlTyAIzk2ok2Sn5ZY6NPPmVQjMFch"  :center="center" :zoom="zoom" @ready="handler">
      <bm-map-type :map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']" anchor="BMAP_ANCHOR_TOP_LEFT"></bm-map-type>
      <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
      <bm-scale anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-scale>
       <bm-circle v-if="radius && center.lat" :center="center" :radius="radius * 1000" stroke-color="blue" :stroke-opacity="0.5" :stroke-weight="2"   :editing="false"></bm-circle>
       <bm-marker v-if="center.lat" :position="center" ></bm-marker>
    </baidu-map>


  </div>
</template>

<script>
  import BaiduMap from 'vue-baidu-map/components/map/Map.vue'
  import {BmMapType, BmNavigation, BmCircle,BmScale,BmMarker} from 'vue-baidu-map'

  export default {
    // 挂载地图级组件
    components: {
        BaiduMap,
        BmMapType,
        BmNavigation,
        BmCircle,
        BmScale,
        BmMarker
     },
    //对外的公开的变量
    props: {
      item:Object
    },
    //内部的私有的变量
    data(){
      return {
        BMap: undefined,
        map: undefined,
        center: {},
        zoom: 10,
        radius: undefined,
        searchKeyWord: undefined,
        form:{
          address: undefined
        }
      }
    },
    methods: {
      //百度地图
       handler ({BMap, map}) {
         console.log('handler')
         this.BMap=BMap;
         this.map= map;
        //this.map.enableScrollWheelZoom()
      },
      //点击覆盖物事件
      clickMarketCallback(info){
        console.log(info)
        this.form.latitude =info.point.lat
        this.form.longitude =info.point.lng
        this.form.address =info.address
        //回调通知
        this.$emit('myclick',this.form)
      },
      //点击搜索地图
      handlerMapSearch(){
        if(this.form.address){
           this.searchKeyWord = this.form.address
           let  that=this;

           //使用原生的百度地图来开发  https://lbsyun.baidu.com/jsdemo.htm#localSearchKeyData
           let options = {
           		onSearchComplete(results){
           			// 判断状态是否正确
           			if (localSearch.getStatus() == BMAP_STATUS_SUCCESS){
                  //清除所有的覆盖物
                    that.map.clearOverlays();
           				  let arr=results.as;
                    //循环添加添加覆盖物
                    for(let index in arr){
                      //point={lat:29.632273,lng: 106.472296}
                      let pointObj = arr[index].point;
                      //创建一个点覆盖物
                      let newMarker = new BMap.Marker(new BMap.Point(pointObj.lng, pointObj.lat));


                      //创建一个信息框窗体
                      let opts = {
                      	    width : 200,     // 信息窗口宽度
                      	    height: 100,     // 信息窗口高度
                      	    title : arr[index].title , // 信息窗口标题
                      	    message:arr[index].address
                      	}
                      let infoWindow = new BMap.InfoWindow(arr[index].address, opts);  // 创建信息窗口对象
                      // 点标记添加点击事件
                      newMarker.addEventListener('click', function () {
                          that.clickMarketCallback(arr[index])
                          //显示窗体
                          that.map.openInfoWindow(infoWindow, pointObj);
                      });

                      // 在地图上添加点标记
                      that.map.addOverlay(newMarker);
                    }

                    //检索结束后自动调整地图视野。
                    if(arr.length>0){
                      that.$set(that.center,'lng',arr[0].point.lng)
                      that.$set(that.center,'lat',arr[0].point.lat)

                      setTimeout(() => {
                            that.map.centerAndZoom(new BMap.Point(arr[0].point.lng, arr[0].point.lat), 14); // 初始化地图,设置中心点坐标和地图级
                      }, 300);
                    }
           			}
           		}
           	};

            let localSearch = new BMap.LocalSearch(this.map, options);
            localSearch.search(this.searchKeyWord);
        }
      },
    },
    //只会被调用一次
    created() {
       this.center={}
       if(this.item.radius){
          this.radius = this.item.radius
       }
       if(this.item.longitude){
         this.center.lng = this.item.longitude
         this.center.lat = this.item.latitude
         this.form.address= this.item.address
       }else{
         this.center.lng = 106.556878
         this.center.lat = 29.570243
       }

        this.zoom =13
    },
    watch:{
      'item': {
          handler: function (newValue, oldVal) {
            this.form = Object.assign({}, this.form,newValue)
            console.log(newValue)
            this.center={}
            this.center.lng = newValue.longitude
            this.center.lat = newValue.latitude
            this.radius=newValue.radius
            setTimeout(() => {
                  this.map.centerAndZoom(new BMap.Point(this.center.lng, this.center.lat), 13); // 初始化地图,设置中心点坐标和地图级
            }, 300);
          },
          deep: true
      }
    }
  }

</script>

<style scoped>
  .mapsearchcss{
    padding: 10px;
  }

  .bm-view {
    width: 100%;
    height: 400px;
  }
</style>
